<template>
	<view class="gjl-view">
		<fullloading :loadshow="loading" text="登录中..." v-if="!needPhone">
			<view class="load-time">
				<u-button @click="routeTo">登录时间过长？点击这里</u-button>
			</view>
		</fullloading>
		<view class="content" v-else>
			<view class="login-form">
				<u-form :model="form" ref="uForm" :error-type="['toast']">
					<u-form-item label="" left-icon="man-add" prop="mobile">
						<u-input v-model="form.mobile" placeholder="请输入手机号" />
					</u-form-item>
					<u-form-item label="" left-icon="lock" prop="code">
						<u-input v-model="form.code" placeholder="请输入验证码" />
						<view class="code-btn" slot="right">
							<u-button @click="getMobileCode('bind_mobile')" size="mini">{{tips}}</u-button>
						</view>
					</u-form-item>
				</u-form>
				<view class="submit-btn">
					<u-button @click="submit(2)"
						:custom-style="{color: '#fff',background: '#FFDF28',fontSize: '32rpx'}">注册
					</u-button>
				</view>
			</view>
		</view>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
	</view>
</template>

<script>
	import {
		getUrlCode
	} from '@/libs/wxauth.js';
	import fullloading from '@/components/fullloading/fullloading.vue';
	export default {
		components: {
			fullloading
		},
		data() {
			return {
				query: {},
				loading: true,
				form: {
					mobile: '',
					code: ''
				},
				seconds: 60,
				tips: '',
				needPhone: false
			}
		},
		onLoad(item) {
			this.query = item;
			this.login();
		},
		mounted() {
			uni.$on('needPhone', this.toReg);
		},
		methods: {
			// 登录
			login() {
				let code = getUrlCode().code;
				code = decodeURIComponent(code);
				this.$apis.officialLogin({
					code
				}).then((res) => {
					this.$store.dispatch("Login", res);
					this.$refs.uToast.show({
						title: '登录成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success',
						// 如果不需要图标，请设置为false
						icon: false,
						callback: this.routeTo
					})
				})
			},
			submit(type) {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (type == 1) {
							this.login()
							return
						}
						if (type == 2) {
							this.register()
							return
						}
						if (type == 3) {
							this.resetpw()
							return
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			// 注册
			register() {
				let obj = {
					mobile: this.form.mobile,
					invite_code: this.vuex_scene.invite_code,
					code: this.form.code
				}
				this.$apis.officialLogin(obj).then((res) => {
					this.$store.dispatch("Login", res);
					this.$refs.uToast.show({
						title: '登录成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success',
						// 如果不需要图标，请设置为false
						icon: false,
						callback: this.routeTo
					})
				})
			},
			// 跳转
			routeTo() {
				this.jRouter({
					url: decodeURIComponent(this.query.path),
					replace: 'switchTab'
				})
			},
			// 需要手机号
			toReg() {
				this.needPhone = true;
				this.$nextTick(()=>{
					this.setRules();
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getMobileCode(type) {
				if (this.$refs.uCode.canGetCode) {
					let obj = {
						mobile: this.form.mobile,
						event: type,
						apiLoadText: '正在获取验证码'
					}
					this.$apis.getMobileCode(obj).then((res) => {
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {

			},
			start() {

			},
			// 设置表单验证
			setRules() {
				const rules = {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
				this.$refs.uForm.setRules(rules);
			}
		},
		beforeDestroy() {
			uni.$off(['needPhone', this.toReg])
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
</style>

<style scoped lang="scss">
	.gjl-view{
		height: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.login-form{
			.submit-btn{
				margin-top: 30rpx;
			}
		}
	}
	.load-time {
		margin-top: 30rpx;
	}
</style>
